<template>
    <div class="list-box">
        <div class="pannel-title pannel-between">
            <div>评论列表</div>
        </div>
        <div class="line"></div>
        <div class="data-table">
            <a-table
                :columns="columns"
                :row-key="(record) => record.id"
                :data-source="dataSource"
                :pagination="pagination"
                :loading="isLoading"
                @change="handleTableChange"
            >
                <template #action="{record}">
                    <a-button v-if="record.status === 'Pending'" type="primary" @click="resolve(record)">通过</a-button>
                    <a-button v-if="record.status === 'Pending'" type="danger" @click="reject(record)">驳回</a-button>
                    <a-button v-if="record.status === 'Rejected'" type="danger" @click="del(record)">删除</a-button>
                </template>
            </a-table>
        </div>
    </div>
</template>
<script>
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import { message, Table, Modal, Button } from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
export default {
  components: {
    ATable: Table,
    AButton: Button
  },
  setup() {
    const store = useStore();
    //text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
    store.dispatch("setBreadcrumb", {
      text: "审核管理 / 评论审核",
      isBack: false
    });
    const dataSource = ref([]);
    const columns = reactive([
      {
        title: "文章标题",
        dataIndex: "article_title",
        key: "article_title"
      },
      {
        title: "作者",
        dataIndex: "author_name",
        key: "author_name"
      },
      {
        title: "评论内容",
        dataIndex: "comment",
        key: "comment"
      },
      {
        title: "评论用户",
        dataIndex: "name",
        key: "name"
      },
      {
        title: "评论时间",
        dataIndex: "create_time",
        key: "create_time"
      },
      {
        title: "操作",
        key: "action",
        slots: { customRender: "action" }
      }
    ]);
    const pagination = reactive({
      current: 1,
      pageSize: 10,
      total: 0
    });
    return {
      dataSource,
      columns,
      pagination,
      isLoading: ref(false)
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.isLoading = true;
      httpRequest
        .post("评论审核列表", {
          page: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
        .then(res => {
          this.dataSource = res.data.data;
          this.pagination.total = res.data.total;
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    handleTableChange(page) {
      this.pagination.current = page.current;
      this.getList();
    },
    resolve(item) {
      Modal.confirm({
        title: "系统提示",
        content: "确认通过审核？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          return new Promise(res => {
            httpRequest
              .post("审核评论", { id: item.id, status: "Approved" })
              .then(() => {
                setTimeout(() => {
                  message.success("评论审核成功");
                  this.getList();
                }, 1000);
              })
              .catch(() => {
                message.warning({ content: "评论审核失败", key: "error" });
              })
              .finally(() => {
                this.isLoading = false;
                res();
              });
          });
        }
      });
    },
    reject(item) {
      Modal.confirm({
        title: "系统提示",
        content: "确认驳回该评论？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          return new Promise(res => {
            httpRequest
              .post("审核评论", { id: item.id, status: "Rejected" })
              .then(() => {
                setTimeout(() => {
                  message.success("评论驳回成功");
                  this.getList();
                }, 1000);
              })
              .catch(() => {
                message.warning({ content: "评论驳回失败", key: "error" });
              })
              .finally(() => {
                this.isLoading = false;
                res();
              });
          });
        }
      });
    },
    del(item) {
      Modal.confirm({
        title: "系统提示",
        content: "确认删除该评论？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          return new Promise(res => {
            httpRequest
              .post("删除技术文章评论", { id: item.id })
              .then(() => {
                setTimeout(() => {
                  message.success("评论删除成功");
                  this.getList();
                }, 1000);
              })
              .catch(() => {
                message.warning({ content: "评论删除失败", key: "error" });
              })
              .finally(() => {
                this.isLoading = false;
                res();
              });
          });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.line {
  width: 100%;
  margin: 20px 0;
  border-top: 1px solid #eee;
}
</style>
